<template>
  <div class="page-container">
    <div class="page-title">
      用户详情
    </div>
    
    <div class="info-section">
      <div class="section-title">账户信息</div>
      <div class="info-grid">
        <div class="info-item" v-for="item in accountInformationList" :key="item.index">
          <div class="info-label">{{item.name}}:</div>
          <img v-if="item.name=='头像'" class="avatar-image" :src="item.value">
          <div v-if="item.name!='头像'" class="info-value">{{item.value}}</div>
        </div>
      </div>
    </div>

    <div class="info-section">
      <div class="section-title">数据统计</div>
      <div class="statistics-grid">
        <div v-for="item in dataStatisticsList" :key="item.index" class="statistics-card">
          <div class="statistics-value">
            <el-statistic title="" :value="item.title" value-style="font-size:24px;color:#165dff" />
          </div>
          <div class="statistics-label">{{item.name}}</div>
        </div>
      </div>
    </div>

    <div class="info-section">
      <div class="section-title">财富值</div>
      <div class="wealth-grid">
        <div class="wealth-card">
          <div class="card-header">
            <span class="card-title">财富值总额：{{wealthData.all}}</span>
          </div>
          <div class="card-content">
            <div class="wealth-item" v-for="item in wealthData.ewalthDataList" :key="item.id">
              <div class="item-left">
                <div class="item-title">备注：{{item.notes}}</div>
                <div class="item-time">{{formatDate(item.time)}}</div>
              </div>
              <div class="item-right" :class="{'increase': item.iorDecrease=='1'}">
                {{item.iorDecrease=='0' ? '-' : '+'}} {{item.price}}
              </div>
            </div>
          </div>
        </div>

        <div class="wealth-card">
          <div class="card-header">
            <span class="card-title">我的推荐: ({{recommendation.all}})</span>
          </div>
          <div class="card-content">
            <div class="recommend-item" v-for="item in recommendation.ewalthDataList" :key="item.id">
              <img class="user-avatar" :src="item.img">
              <div class="user-info">
                <div class="user-name">{{item.name}}</div>
                <div class="user-phone">{{item.phone}}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="wealth-card">
          <div class="card-header">
            <span class="card-title">我的推荐人:（{{myrecommendation.all}}）</span>
          </div>
          <div class="card-content">
            <div class="recommend-item" v-for="item in myrecommendation.ewalthDataList" :key="item.id">
              <img class="user-avatar" :src="item.img">
              <div class="user-info">
                <div class="user-name">{{item.name}}</div>
                <div class="user-phone">{{item.phone}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as UsersApi from '@/api/hutai/salesman'
import {getMiRecommend, getWealthRecordList} from "@/api/hutai/salesman"
import {dateFormatter, formatDate} from '@/utils/formatTime'
const router = useRouter();
const accountInformationList = reactive([])
UsersApi.getSalesmanDetails(router.currentRoute.value.query.id).then(res=> {
  accountInformationList.push({name:"头像",value:res.avatar})
  accountInformationList.push({name:"昵称",value:res.nickname})
  accountInformationList.push({name:"手机号",value:res.mobile})
  accountInformationList.push({name:"ID",value:res.userId})
  accountInformationList.push({name:"真实姓名",value:res.name})
  if (res.sex==1){
    accountInformationList.push({name:"性别",value:"男"})
  }else if(res.sex==2){
    accountInformationList.push({name:"性别",value:"女"})
  }else {
    accountInformationList.push({name:"性别",value:"未知"})
  }
  if(res.status==0){
    accountInformationList.push({name:"账户状态",value:"正常"})
  }else {
    accountInformationList.push({name:"账户状态",value:"禁用"})
  }
  accountInformationList.push({name:"标签",value:res.customLabel})
  if (res.isHome==1){
    accountInformationList.push({name:"首页推荐",value:"开启"})
  }else {
    accountInformationList.push({name:"首页推荐",value:"关闭"})
  }
  accountInformationList.push({name:"业务员个人介绍",value:res.customLabel})
  accountInformationList.push({name:"登陆名",value:res.username})
  accountInformationList.push({name:"登陆密码",value:"******"})
})

const dataStatisticsList =reactive([])
UsersApi.getAgentWMyFollowUpUser(router.currentRoute.value.query.id).then(res=>{
  dataStatisticsList.push({title:res,name:"我的客户（单）"})
})
UsersApi.getMyMonthFollowUpUser(router.currentRoute.value.query.id).then(res=>{
  dataStatisticsList.push({title: res,name: "当月已跟进客户（人)"})
})
UsersApi.getMonthCjNumber(router.currentRoute.value.query.id).then(res=>{
  dataStatisticsList.push({title: res,name: "当月已成交订单数量"})
})
UsersApi.getMonthCjMoney(router.currentRoute.value.query.id).then(res=>{
  dataStatisticsList.push({title: res,name: "当月已成交金额（元）"})
})

const recommendation= reactive({
  all:'',
  ewalthDataList:[
  ]
})
UsersApi.getHeRecommend(router.currentRoute.value.query.id).then(res=>{
  if(res==undefined) {
    recommendation.all=0
  }else{
    console.log(res,"他的推荐")
    recommendation.all=res.length

    for(var item in res){
      recommendation.ewalthDataList.push({id:item,img:res[item].avatar,name:res[item].name,phone:res[item].mobile})
    }
  }
})
const myrecommendation= reactive({
  all:'',
  ewalthDataList:[
  ]
})
UsersApi.getMiRecommend(router.currentRoute.value.query.id).then(res=>{
  if(res==undefined) {
    myrecommendation.all=0
  }else{
    myrecommendation.all=res.length
    for(var item in res){
      myrecommendation.ewalthDataList.push({id:item,img:res[item].avatar,name:res[item].name,phone:res[item].mobile})
    }
  }
})

const wealthData= reactive({
  all:"",
  ewalthDataList:[

  ]
})
UsersApi.getWealthRecordList(router.currentRoute.value.query.id).then(res=>{
  wealthData.all=res.wealth
  for(const item in res.voList){
    wealthData.ewalthDataList.push({id:res.voList[item].id,notes:res.voList[item].remark,price:res.voList[item].wealthValue,
      time:res.voList[item].createTime,iorDecrease:res.voList[item].iorDecrease})
  }
})

const { push } = useRouter()
const returnclick = () =>{
  push('certificateHolder')
}
const orderALL=()=>{
  push('/orders')
}

</script>
<style lang="scss">
.page-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2f3d;
  margin-bottom: 24px;
  padding-left: 12px;
  border-left: 4px solid #165dff;
}

.info-section {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #165dff;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  
  .info-label {
    color: #606266;
    margin-right: 8px;
    min-width: 100px;
  }
  
  .info-value {
    color: #303133;
  }
  
  .avatar-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.statistics-card {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .statistics-value {
    margin-bottom: 8px;
  }
  
  .statistics-label {
    font-size: 14px;
    color: #606266;
  }
}

.wealth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.wealth-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  
  .card-header {
    padding: 16px 20px;
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
    
    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #1f2f3d;
    }
  }
  
  .card-content {
    padding: 16px 20px;
  }
}

.wealth-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-left {
    .item-title {
      font-size: 14px;
      color: #303133;
      margin-bottom: 4px;
    }
    
    .item-time {
      font-size: 12px;
      color: #909399;
    }
  }
  
  .item-right {
    font-size: 14px;
    font-weight: 500;
    color: #f56c6c;
    
    &.increase {
      color: #67c23a;
    }
  }
}

.recommend-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .user-info {
    .user-name {
      font-size: 14px;
      color: #303133;
      margin-bottom: 4px;
    }
    
    .user-phone {
      font-size: 12px;
      color: #909399;
    }
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .page-container {
    padding: 16px;
  }
  
  .info-section {
    padding: 16px;
  }
  
  .wealth-grid {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>
